<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 职位管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/employer/dashboard.css" rel="stylesheet">
    <style>
        .high-score {
            background-color: #d4edda;
        }
        .bgs-gradient {
        background: linear-gradient(90deg, #7B1FA2, #512DA8);
        color: white;
        padding: 15px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .input-group-text {
        background-color: #f8f9fa;
        border-right: none;
    }
    .form-control {
        border-left: none;
    }
</style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
         <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/company/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li class="active">
                    <a href="/company/jobManage">
                        <i class='bx bx-briefcase'></i>
                        <span>职位管理</span>
                    </a>
                </li>
                <li>
                    <a href="/company/companyCenter">
                        <i class='bx bx-cog'></i>
                        <span>企业设置</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/公司头像.png') }}" alt="企业Logo" class="avatar">
                    <div class="dropdown">
                            <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                                {{ company_name }}
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="/company/companyCenter"><i class='bx bx-cog'></i> 企业设置</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="/logout"><i class='bx bx-log-out'></i> 退出登录</a></li>
                            </ul>
                        </div>
                </div>
            </div>

            <div class="dashboard-content">
                <!-- 职位列表 -->
                <div class="section-header">
                    <h5>职位列表</h5>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addJobModal">发布新职位</button>
                </div>
                <div class="table-responsive">
                    <table class="table" id="jobTable">
                        <thead>
                            <tr>
                                <th>职位名称</th>
                                <th>类型</th>
                                <th>最低薪资</th>
                                <th>最高薪资</th>
                                <th>位置</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 职位列表将通过AJAX动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- 发布新职位模态框 -->
    <!-- 发布新职位模态框 -->
<div class="modal fade" id="addJobModal" tabindex="-1" aria-labelledby="addJobModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bgs-gradient text-white">
                <h5 class="modal-title" id="addJobModalLabel">发布新职位</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="jobForm">
                    <input type="hidden" id="jobId" name="jobId" value="">

                    <div class="mb-3">
                        <label for="jobTitle" class="form-label">职位名称</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-briefcase'></i></span>
                            <input type="text" class="form-control" id="jobTitle" name="jobTitle" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="jobType" class="form-label">职位类型</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-category'></i></span>
                            <select class="form-select" id="jobType" name="jobType" required>
                                <option value="全职">全职</option>
                                <option value="兼职">兼职</option>
                                <option value="实习">实习</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="jobDescription" class="form-label">职位描述</label>
                        <textarea class="form-control" id="jobDescription" name="jobDescription" rows="3" required></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="jobRequirements" class="form-label">职位要求</label>
                        <textarea class="form-control" id="jobRequirements" name="jobRequirements" rows="3" required></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="minSalary" class="form-label">最低薪资</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class='bx bx-money'></i></span>
                                <input type="number" class="form-control" id="minSalary" name="minSalary" step = "500" required>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="maxSalary" class="form-label">最高薪资</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class='bx bx-money'></i></span>
                                <input type="number" class="form-control" id="maxSalary" name="maxSalary" step = "500" required>
                            </div>
                        </div>
                    </div>

<div class="mb-3">
    <label for="jobLocation" class="form-label">工作地点</label>
    <div class="input-group">
        <span class="input-group-text"><i class='bx bx-map'></i></span>

        <!-- 省份选择 -->
        <select class="form-control me-2" id="province" name="province" required>
            <option value="">请选择省份</option>
        </select>

        <!-- 城市选择 -->
        <select class="form-control" id="city" name="city" required>
            <option value="">请选择城市</option>
        </select>
    </div>
</div>


                    <div class="mb-3">
                        <label for="expirationDate" class="form-label">截至日期</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-calendar'></i></span>
                            <input type="date" class="form-control" id="expirationDate" name="expirationDate">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">发布职位</button>
                </form>
            </div>
        </div>
    </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/city.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取职位列表
            fetch('/api/get_jobs')
                .then(response => response.json())
                .then(data => {
                    const jobTableBody = document.querySelector('#jobTable tbody');
                    data.jobs.sort((a, b) => b.total_score - a.total_score).forEach(job => {
                        const row = document.createElement('tr');
                        row.className = job.total_score >= 8 ? 'high-score' : '';
                        row.innerHTML = `
                            <td>${job.title}</td>
                            <td>${job.job_type}</td>
                            <td>${job.min_salary}</td>
                            <td>${job.max_salary}</td>
                            <td>${job.location}</td>
                            <td>${job.status === 'active' ? '活跃' : '结束'}</td>
                            <td>
                                <a href="#" class="btn btn-outline-primary" data-job-id="${job.job_id}">查看详情</a>
                                <a href="#" class="btn btn-outline-${job.status === 'active' ? 'danger' : 'success'}">${job.status === 'active' ? '关闭职位' : '重新发布'}</a>
                            </td>
                        `;
                        jobTableBody.appendChild(row);
                    });

                    // 查看详情按钮点击事件
                    document.querySelectorAll('#jobTable a.btn-outline-primary').forEach(button => {
                        button.addEventListener('click', function(event) {
                            event.preventDefault();
                            const jobId = this.getAttribute('data-job-id');
                            window.location.href = `/api/job_detail/${jobId}`;
                        });
                    });
                });

            // 发布新职位
            document.getElementById('jobForm').addEventListener('submit', function(event) {
                event.preventDefault();
                const formData = new FormData(this);
                key1=formData.get('province')
                key2=formData.get('city')
                locations=citys[0][key1]+citys[key1][key2]
                const jobData = {
                    job_id: formData.get('jobId'), // 获取job_id
                    title: formData.get('jobTitle'),
                    job_type: formData.get('jobType'),
                    description: formData.get('jobDescription'),
                    requirements: formData.get('jobRequirements'),
                    min_salary: formData.get('minSalary'),
                    max_salary: formData.get('maxSalary'),
                    location: locations,
                    post_date: new Date().toISOString().split('T')[0],
                    expiration_date: formData.get('expirationDate') || null // 包含截至日期
                };

                fetch('/api/upload_job', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(jobData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message === '职位发布成功') {
                        alert('职位发布成功');
                        // 刷新职位列表
                        window.location.reload();
                    } else {
                        alert('职位发布失败');
                    }
                });
            });

            // 搜索功能
            document.getElementById('searchInput').addEventListener('input', function() {
                const filter = this.value.toLowerCase();
                const rows = document.querySelectorAll('#jobTable tbody tr');
                rows.forEach(row => {
                    const name = row.cells[0].textContent.toLowerCase();
                    const jobType = row.cells[1].textContent.toLowerCase();
                    const minSalary = row.cells[2].textContent.toLowerCase();
                    const maxSalary = row.cells[3].textContent.toLowerCase();
                    const location = row.cells[4].textContent.toLowerCase();
                    const status = row.cells[5].textContent.toLowerCase();
                    if (name.includes(filter) || jobType.includes(filter) || minSalary.includes(filter) || maxSalary.includes(filter) || location.includes(filter) || status.includes(filter)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
            });
        });
    </script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const provinceSelect = document.getElementById("province");
        const citySelect = document.getElementById("city");

        // 加载省份
        for (let key in citys[0]) {
            let option = document.createElement("option");
            option.value = key;
            option.textContent = citys[0][key];
            provinceSelect.appendChild(option);
        }

        // 监听省份选择，更新城市
        provinceSelect.addEventListener("change", function() {
            const provinceId = this.value;
            citySelect.innerHTML = `<option value="">请选择城市</option>`;

            if (provinceId && citys[provinceId]) {
                for (let key in citys[provinceId]) {
                    let option = document.createElement("option");
                    option.value = key;
                    option.textContent = citys[provinceId][key];
                    citySelect.appendChild(option);
                }
            }
        });
    });
</script>
</body>
</html>